/*
* js中编写在window对象上添加onload事件处理程序，
当JSP页面全部加载完成后调用JS函数中的函数绘制两个chart图
* */
window.onload = function (){
    //调用绘制两个chart图的函数
    //$.ajax用于前端和后端的交互，通过掉哟后端接口返回数据给前端，是一个异步过程
    $.ajax({
        "dataType":"json",//数据类型是json格式
        "type":"GET",//接口请求类型为GET请求
        "data": {count:1},//传入的参数
        "url":"/javaweb_war_exploded/HomePageServlet",//接口地址
        "success":function (result) {//success表示接口请求成功后要做的事情
            console.log(result);
            var list=result.list;//数据
            chart1(list);
        },error:function (XMLHttpRequest,textStatus,errorThrown) {
            //error表示接口请求失败后要做的事情
            alert("连接到读取器出现错误，请稍后再试！");
        }
    });
    //第二个统计图
    chart2();
};

//绘制学生人数统计图
function chart1(list){
    //使用echarts插件提供的init方法初始化
    var chart=echarts.init(document.getElementById("chart1"));
    var option = {
        title: {
            text: '学生男女人数统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '人数',
                type: 'pie',
                radius: '50%',
                data: list,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    //将option参数加载到chart中
    chart.setOption(option);
}
//第二个统计图
function chart2(){
    var chart=echarts.init(document.getElementById("chart2"));
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };
    //将option参数加载到chart中
    chart.setOption(option);
}